<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="4" :sm="6">
            <a-form-item :label="$t('systemManagement.project')">
              <a-select v-model="queryParam.projectCode"  v-decorator="[ 'projectCode']" :placeholder="$t('base.pleaseChoose')">
                <a-select-option v-for="item in projectList" :key="item.id" :value="item.code">
                  {{item.name}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :md="4" :sm="6">
            <a-form-item :label="$t('light.gateWayName')">
              <j-input :placeholder="$t('base.inputVagueQuery')" v-model="queryParam.gatewayName"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="6">
            <a-form-item :label="$t('light.gateWayCode')">
              <j-input :placeholder="$t('base.inputVagueQuery')" v-model="queryParam.gateWayCode"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="8">
            <a-form-item :label="$t('light.gateWayStatus')">
              <j-dict-select-tag v-model="queryParam.currentWorkStatus" :placeholder="$t('base.pleaseChoose')"
                                 dictCode="glr_equipment_status"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search"> {{$t('base.query')}} </a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px"> {{$t('base.reset')}} </a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">{{$t('base.add')}}</a-button>
      <a-button type="primary" icon="download" @click="customUploadFile('light_address.xls')">{{$t('light.downloadSubControlAddressTemplate')}}</a-button>
      <a-button type="primary" icon="download" @click="customUploadFile('light_rated_power.xls')">{{$t('light.downloadRatedPowerTemplate')}}</a-button>
      <a-button type="primary"  icon="download" @click="readGateWay()">{{$t('light.readGatewayInformation')}}</a-button>
      <a-button type="primary"  icon="download" @click="ledOpenOrClose($t('light.turnOn')+'？',100)">{{$t('light.turnOn')}}</a-button>
      <a-button type="primary"  icon="download" @click="ledOpenOrClose($t('light.turnOff')+'？',0)">{{$t('light.turnOff')}}</a-button>
      <a-button type="primary"  @click="brightnessSet" icon="bulb">{{$t('light.dimming')}}</a-button>
      <a-button type="primary"  icon="download" @click="powerUpOrFailure($t('light.confirmPowerOn')+'？','Y')">{{$t('light.mainRoadTurnOn')}}</a-button>
      <a-button type="primary"  icon="download" @click="powerUpOrFailure($t('light.confirmPowerOff')+'？' ,'N')">{{$t('light.mainRoadTurnOff')}}</a-button>
      <a-button type="primary"  icon="download" @click="setParameter()">{{$t('base.parameterSetting')}}</a-button>
      <a-button type="primary"  icon="delete" @click="batchDel">{{$t('base.del')}}</a-button>
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
                @change="handleImportExcel">
        <!--
        <a-button type="primary" icon="import">导入</a-button>
        -->
      </a-upload>
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{fixed:true,selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">
        <template slot="avatarslot" slot-scope="text, record, index">
          <div class="anty-img-wrap">
            <img :src="getAvatarView(record.currentWorkStatus)"/>
          </div>
        </template>

        <template slot="nameslot" slot-scope="text, record, index">
          <div class="anty-img-wrap">
            <j-ellipsis :length="10" :value="record.gatewayName"/>
          </div>
        </template>


        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无此图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="图片不存在"
               style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无此文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="uploadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)"> {{$t('base.edit')}} </a>

          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link"> {{$t('base.more')}} <a-icon type="down"/></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm :title="$t('base.confirmDelete')" @confirm="() => handleDelete(record.id)">
                  <a> <a-icon type="delete" /> {{$t('base.del')}} </a>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item>
                 <a @click="showGatewayModel(record)">{{$t('light.pattern')}} </a>
              </a-menu-item>
               <a-menu-item>
                 <a @click="updateLg(record)">{{$t('light.updateCoordinate')}}</a>
              </a-menu-item>

               <a-menu-item v-if="substring(record.gateWayCode)=='0101'||substring(record.gateWayCode)=='0301'">
                 <a @click="getLightGateWayAddress(record)"> {{$t('light.subControlAddress')}} </a>
              </a-menu-item>

              <a-menu-item v-if="substring(record.gateWayCode)=='0101'||substring(record.gateWayCode)=='0301'||substring(record.gateWayCode)=='0501'||substring(record.gateWayCode)=='0601'">
                 <a @click="getLightGateWayRatedPower(record)"> {{$t('light.ratedPower')}} </a>
              </a-menu-item>

              <a-menu-item v-if="substring(record.gateWayCode)=='0301'">
                 <a @click="getLightGateWayPhase(record)"> {{$t('light.phase')}} </a>
              </a-menu-item>

              <a-menu-item>
                 <a @click="viewGateWay(record)"> {{$t('base.detailL')}} </a>
              </a-menu-item>

            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </div>

    <glrGateway-modal ref="modalForm" @ok="modalFormOk"></glrGateway-modal>
    <glr-pattern-gateway-list ref="glrPatternGatewayList" @ok="modalFormOk"></glr-pattern-gateway-list>
    <glr-light-l-g ref="glrLightLG" @ok="modalFormOk"></glr-light-l-g>
    <glr-gate-way-set-parameter0101 ref="glrGateWaySetParameter0101"></glr-gate-way-set-parameter0101>
    <glr-gate-way-set-parameter0301 ref="glrGateWaySetParameter0301"></glr-gate-way-set-parameter0301>
    <glr-gate-way-set-parameter0501 ref="glrGateWaySetParameter0501"></glr-gate-way-set-parameter0501>
    <glr-gate-way-set-parameter0601 ref="glrGateWaySetParameter0601"></glr-gate-way-set-parameter0601>
    <glr-light-gate-way-address ref="glrLightGateWayAddress"></glr-light-gate-way-address>
    <glr-light-gate-way-phase ref="glrLightGateWayPhase"></glr-light-gate-way-phase>
    <glr-light-gate-way-rated-power ref="glrLightGateWayRatedPower"></glr-light-gate-way-rated-power>
    <glr-gateway-view ref="glrLightGateWayView"></glr-gateway-view>
    <a-modal
      :title="brightnessSetTitle"
      :visible="brightnessSetVisible"
      :confirmLoading="brightnessSetConfirmLoading"
      @ok="brightnessSetHandleOk"
      @cancel="brightnessSetHandleCancel">
      <div style="width: 100%">
        {{$t('light.brightness')}} :<a-slider id="vol_Id" :max="maxValue" :disabled="disabledValue" :step="5" :defaultValue="0" v-model="brightnessValue"/>
      </div>
    </a-modal>
  </a-card>
</template>

<script>

  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import GlrGatewayModal from './modules/GlrGatewayModal'
  import GlrGatewayView from './modules/GlrGatewayView'
  import {httpAction} from '@/api/manage'
  import JInput from '@/components/jeecg/JInput'
  import GlrPatternGatewayList from "./GlrPatternGatewayList";
  import GlrLightLG from "./modules/GlrLightLG";
  import GlrGateWaySetParameter0101 from "./modules/GlrGateWaySetParameter0101";
  import GlrGateWaySetParameter0301 from "./modules/GlrGateWaySetParameter0301";
  import GlrGateWaySetParameter0501 from "./modules/GlrGateWaySetParameter0501";
  import GlrGateWaySetParameter0601 from "./modules/GlrGateWaySetParameter0601";
  import GlrLightGateWayAddress from "./GlrLightGateWayAddress";
  import GlrLightGateWayRatedPower from "./GlrLightGateWayRatedPower";
  import GlrLightGateWayPhase from "./GlrLightGateWayPhase";

  import JEllipsis from "@/components/jeecg/JEllipsis"
  export default {
    name: "GlrGatewayList",
    mixins: [JeecgListMixin],
    components: {
      GlrLightGateWayAddress,
      GlrLightGateWayRatedPower,
      GlrLightGateWayPhase,
      GlrGateWaySetParameter0101,
      GlrGateWaySetParameter0301,
      GlrGateWaySetParameter0501,
      GlrGateWaySetParameter0601,
      GlrLightLG,
      GlrPatternGatewayList,
      GlrGatewayModal,
      GlrGatewayView,
      JInput,
      JEllipsis
    },
    data() {
      return {
        gateway0301:false,
        gateway0501:false,
        spinning: false,
        projectList:[],
        description: this.$t('light.gateWayManagement'),
        brightnessSetTitle:this.$t('light.brightnessSetting'),
        brightnessSetVisible:false,
        brightnessSetConfirmLoading:false,
        disabledValue:false,
        brightnessValue:0,
        maxValue:100,
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            fixed: 'left',
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: this.$t('light.gateWayModel'),
            align: "center",
            fixed: 'left',
            width: 100,
            dataIndex: 'gatewayModel_dictText'
          },
          {
            title: this.$t('light.gateWayCode'),
            align: "center",
            fixed: 'left',
            key: 'gateWayCode',
            width: 130,
            dataIndex: 'gateWayCode',
          },
          {
            title: this.$t('light.gateWayName'),
            align: "center",
            fixed: 'left',
            width: 150,
            dataIndex: 'gatewayName',
            scopedSlots: {customRender: "nameslot"}
          },
          {
            title: this.$t('base.status'),
            align: "center",
            fixed: 'left',
            width: 50,
            scopedSlots: {customRender: "avatarslot"}
          },
          {
            title: this.$t('base.type'),
            align: "center",
            width: 60,
            dataIndex: 'gatewayType_dictText'
          },

          {
            title: this.$t('light.phoneNumber'),
            align: "center",
            dataIndex: 'phoneNumber'
          },
          {
            title: this.$t('light.mobileCard') ,
            align: "center",
            width: 80,
            dataIndex: 'phoneType_dictText'
          },

          {
            title: this.$t('light.dimmingValue'),
            align: "center",
            dataIndex: 'dimmingValue'
          },

          {
            title: this.$t('light.temperature')+'(℃)',
            align: "center",
            dataIndex: 'temperature'
          },
          {
            title: this.$t('light.humidity')+'RH',
            align: "center",
            dataIndex: 'humidity'
          },

          {
            title: this.$t('base.operation'),
            dataIndex: 'action',
            fixed: 'right',
            width: 120,
            align: "center",
            scopedSlots: {customRender: 'action'}
          }
        ],
        url: {
          list: "/glr/glrGateway/list",
          delete: "/glr/glrGateway/delete",
          deleteBatch: "/glr/glrGateway/deleteBatch",
          exportXlsUrl: "/glr/glrGateway/exportXls",
          importExcelUrl: "glr/glrGateway/importExcel",
          readGateWay: "glr/glrGateway/readGateWay",
          ledOpenOrClose: "glr/glrGateway/ledOpenOrClose",
          powerUpOrFailure: "glr/glrGateway/powerUpOrFailure",
          getProjectList: "/glr/glrProject/getProject",
            getProjectList: "/glr/glrProject/getProject"
        },
        dictOptions: {},
      }
    },
    created(){
      const that = this;
      httpAction(that.url.getProjectList,{},"post").then((res)=>{
        if(res.success){
          that.projectList=res.result;
        }else{
          //that.$message.warning(res.message);
          that.$message.warning(that.$t('base.operationFailed'));
        }
      }).finally(() => {
        that.confirmLoading = false;
      })
    },
    computed: {
      importExcelUrl: function () {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      }
    },
    methods: {
      initDictConfig() {
      },
      getAvatarView: function (status) {
        if (status == 'Y') {
          return require('@/assets/img/zaixian.png');
        } else {
          return require('@/assets/img/lixian.png');
        }
      },
      brightnessSet(){
          if (this.selectedRowKeys.length <= 0) {
              this.$message.warning(this.$t('base.pleaseSelectARecord'));
              return;
          }
          this.brightnessValue=0;
          this.brightnessSetVisible=true;
      },
      brightnessSetHandleCancel(){
          this.brightnessValue=0;
          this.brightnessSetVisible=false;
      },
      readGateWay: function () {
        if (this.selectionRows.length <= 0) {
          this.$message.warning(this.$t('base.pleaseSelectARecord'));
          return;
        } else {
          var gateWayCodes = "";
          for (var a = 0; a < this.selectionRows.length; a++) {
            gateWayCodes += this.selectionRows[0].gateWayCode + ",";
          }
          var that = this;
          that.loading = true;
          httpAction(that.url.readGateWay, {gateWayCodes: gateWayCodes}, "post").then((res) => {
            if (res.success) {
              setTimeout(function () {
                that.loading = false;
                //that.$message.success(res.message);
                that.$message.success(that.$t('base.operationSuccessful'));
                that.loadData();
                that.onClearSelected();
              }, 2000);
            } else {
              //that.$message.warning(res.message);
              that.$message.warning(that.$t('base.operationFailed'));
            }
          }).finally(() => {
            setTimeout(function () {
              that.loading = false;
            }, 3000);
          });
        }
      },
        brightnessSetHandleOk(){
            if (this.selectionRows.length <= 0) {
                this.$message.warning(this.$t('base.pleaseSelectARecord'));
                return;
            } else {
                var gateWayCodes = "";
                for (var a = 0; a < this.selectionRows.length; a++) {
                    gateWayCodes += this.selectionRows[0].gateWayCode + ",";
                }
                var that = this;
                that.loading = true;
                httpAction(that.url.ledOpenOrClose, {
                    gateWayCodes: gateWayCodes,
                    brightValue: that.brightnessValue
                }, "post").then((res) => {
                    if (res.success) {
                      //that.$message.success(res.message);
                      that.$message.success(that.$t('base.operationSuccessful'));
                      that.brightnessValue=0;
                      that.brightnessSetVisible=false;
                    } else {
                      //that.$message.warning(res.message);
                      that.$message.warning(that.$t('base.operationFailed'));
                    }
                }).finally(() => {
                    that.loading = false;
                });
            }
        },
        checkBoxOnChange(e){
            if(e.target.checked){
                this.disabledValue=true;
                this.brightnessValue=0;
            }else{
                this.disabledValue=false;
            }
        },
      ledOpenOrClose: function (msg, dimmingValue) {
        if (this.selectionRows.length <= 0) {
          this.$message.warning(this.$t('base.pleaseSelectARecord'));
          return;
        } else {
          var gateWayCodes = "";
          for (var a = 0; a < this.selectionRows.length; a++) {
            gateWayCodes += this.selectionRows[0].gateWayCode + ",";
          }
          var that = this;
          this.$confirm({
            title: this.$t('base.confirm'),
            content: msg,
            onOk: function () {
              that.loading = true;
              httpAction(that.url.ledOpenOrClose, {
                gateWayCodes: gateWayCodes,
                brightValue: dimmingValue
              }, "post").then((res) => {
                if (res.success) {
                  //that.$message.success(res.message);
                  that.$message.success(that.$t('base.operationSuccessful'));
                  that.loadData();
                  that.onClearSelected();
                } else {
                  //that.$message.warning(res.message);
                  that.$message.warning(that.$t('base.operationFailed'));
                }
              }).finally(() => {
                that.loading = false;
              });
            }
          });
        }
      },
      powerUpOrFailure: function (msg, status) {
        if (this.selectionRows.length <= 0) {
          this.$message.warning(this.$t('base.pleaseSelectARecord'));
          return;
        } else {
          var gateWayCodes = "";
          for (var a = 0; a < this.selectionRows.length; a++) {
            gateWayCodes += this.selectionRows[0].gateWayCode + ",";
          }
          var switchingState = '';
          if (status == 'Y') {
            switchingState = '01,01,01,';
          } else {
            switchingState = '00,00,00,';
          }
          var that = this;
          this.$confirm({
            title: this.$t('base.confirm') ,
            content: msg,
            onOk: function () {
              that.loading = true;
              httpAction(that.url.powerUpOrFailure, {
                gateWayCodes: gateWayCodes,
                switchingState: switchingState
              }, "post").then((res) => {
                if (res.success) {
                  //that.$message.success(res.message);
                  that.$message.success(that.$t('base.operationSuccessful'));
                  that.loadData();
                  that.onClearSelected();
                } else {
                  //that.$message.warning(res.message);
                  that.$message.warning(that.$t('base.operationFailed'));
                }
              }).finally(() => {
                that.loading = false;
              });
            }
          });
        }
      },
      showGatewayModel(record) {
        this.$refs.glrPatternGatewayList.edit(record);
      },

      getLightGateWayAddress(record){
        this.$refs.glrLightGateWayAddress.edit(record);
      },
      getLightGateWayRatedPower(record){
        this.$refs.glrLightGateWayRatedPower.edit(record);
      },
      getLightGateWayPhase(record){
        this.$refs.glrLightGateWayPhase.edit(record);
      },
      viewGateWay(record){
          var datevalue='';
          if(record.switchingState){
             var msg=record.switchingState.split(',');
              if(msg[0]==1){
                  datevalue='开,';
              }else{
                  datevalue='关,';
              }
              if(msg[1]==1){
                  datevalue=datevalue+'开,';
              }else{
                  datevalue=datevalue+'关,';
              }
              if(msg[2]==1){
                  datevalue=datevalue+'开,';
              }else{
                  datevalue=datevalue+'关,';
              }
              record.switchingState=datevalue;
          }
        this.$refs.glrLightGateWayView.edit(record);
      },
      updateLg(record) {
        this.$refs.glrLightLG.edit(record,'1');
      },
      setParameter() {
        if (this.selectionRows.length != 1) {
          this.$message.warning(this.$t('base.pleaseSelectARecord'));
          return;
        } else {
          var record;
          for (var a = 0; a < this.selectionRows.length; a++) {
            record = this.selectionRows[0];
          }
          var gateWayCodeStart=record.gateWayCode.substring(0,4);

          this.gateway0101=false;
          this.gateway0301=false;
          this.gateway0501=false;
          this.gateway0601=false;

          if (gateWayCodeStart=="0101"){
            this.gateway0101=true;
          }
          if (gateWayCodeStart=="0301"){
            this.gateway0301=true;
          }
          if (gateWayCodeStart=="0501"){
            this.gateway0501=true;
          }
          if (gateWayCodeStart=="0601"){
            this.gateway0601=true;
          }

          //if (gateWayCodeStart=="0301"||gateWayCodeStart=="0501"||gateWayCodeStart=="0601"){
            //this.gateway0501=true;
          //}

          if (this.gateway0101){
            this.$refs.glrGateWaySetParameter0101.edit(record);
          }
          if (this.gateway0301){
            this.$refs.glrGateWaySetParameter0301.edit(record);
          }
          if (this.gateway0501){
            this.$refs.glrGateWaySetParameter0501.edit(record);
          }
          if (this.gateway0601){
            this.$refs.glrGateWaySetParameter0601.edit(record);
          }

        }
      },

      substring(gateWayCode){
        if (gateWayCode.length>=4){
          return gateWayCode.substring(0,4);
        }
        return "";
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>